<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            回调函数--回调地狱--异步

            社区（github） 里面有想到了解决方法 Promise
                --封装了个构造函数-按照他的用法去使用 回调函数（异步操作）就可以避免回调地狱产生

                promise 承诺--许诺-- 只要按照promise提供的方法 去写异步操作 ，就可以避免回调地狱产生
                promsie+ 规范（promise被很多框架使用-语言）

                ECMAScript -  吸收这个语法--js内置了这个功能
            */

        /*  
        Promise 是构造函数-为了解决回调问题
            用法：（需要背过）
                1- 创建  一个Promise对象， 
                    这个构造函数，接收一个函数作为参数
                        这个函数参数有两个形参，resolve,reject
                    我们需要再一个参数函数中 写我们的异步的操作
                        必须要异步操作成功以后调用resolve，
                        异步操作失败调用reject    
                        这样的 创建的promise对象，他就会知道 里面异步操作的状态
        

                理解：（需要背过）     
                --promsie 本质是一个状态机 
                    一旦创建了promise -- 就会成为进行中状态(pending)   
                    一旦调用resolve -- 就会成为完成状态（fulfilled）
                    一旦调用reject -- 就会成为失败状态（rejected）

            使用场景：
                相当于  使用promise将异步操作封装起来，最后提供了一个promsie对象
                   这个对象就知道 里面异步操作的状态  

                  里面异步操作成功以后 想要执行一段代码
                  promsie.then()
                  promsie.catch()

                  then -catch-finally 都是promsie的实例方法

                  p.then().catch().finally   链式调用 实例方法返回的嗾使promise对象自己  

        */

        let username = 'zhangsan' + parseInt(Math.random() * 100000)
        let password = '123456'
        let regAPI = 'http://jx.xuzhixiang.top/ap/api/reg.php' + `?username=${username}&password=${password}`
        let loginAPI = 'http://jx.xuzhixiang.top/ap/api/login.php' + `?username=${username}&password=${password}`
        //    let arr = []
        //    arr.forEach(function(v,i){})
        let p = new Promise(function (resolve, reject) {
            console.log(11);
            console.log(222);
            let xhr = new XMLHttpRequest()
            xhr.open('get', regAPI)
            xhr.send()
            xhr.onload = function () {
                // 异步的
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText);
                    // 异步操作成功--
                    console.log(obj);
                    // resolve 理解 为 就是下面的 then里面的第一个函数
                    resolve(obj)
                    // reject()
                    console.log(p);//fulfilled



                }
            }
            xhr.onerror = function () {
                // rejct 理解 为 就是下面的 then里面的第二个函数
                reject()
            }
        });
        console.log(p);


        // p.then(function (res) {
        //     console.log('promsie对象里面的异步操作成功以后执行');
        //     console.log(res);
        //     // 发起第二个异步操作
        // }, function () {
        //     console.log('promsie对象里面的异步操作失败以后执行');
        // })

        // 链式调用  
        // p.then(function (res) {
        //     console.log('promsie对象里面的异步操作成功以后执行');
        //     console.log(res);
        // }).catch(function () {
        //     console.log('promsie对象里面的异步操作失败以后执行');

        // }).finally(function () {
        //     console.log('不管成功失败 都会执行');
        // })

        p.then(function (res) {
            console.log('promsie对象里面的异步操作成功以后执行');
            console.log(res);

        })
        p.catch(function () {
            console.log('promsie对象里面的异步操作失败以后执行');

        })
        p.finally(function () {
            console.log('不管成功失败 都会执行');
        })
    </script>

</body>

</html>